<!--
	作者：ZhangXin
	时间：2020-07-23
	描述：个人中心页面
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments::head(~{::title})">
    <title>个人中心</title>
</head>

<body>
<!--导航-->
<nav th:replace="fragments::menu(0)"></nav>

<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a href="#" th:href="@{/personal}" class="active teal item">个人信息</a>
            <a href="#" th:href="@{/updatepassword}" class="item">修改密码</a>
        </div>
    </div>

</div>

<!--中间内容-->
<div class="m-container-mini m-padded-tb-big " style="max-width: 50em ;height: 600px;!important;">
    <div class="ui container">
        <div class="ui success message" th:unless="${#strings.isEmpty(successMessage)}">
            <i class="close icon"></i>
            <div class="" th:text="${successMessage}">提示：操作成功！</div>
        </div>
        <div class="ui negative message" th:unless="${#strings.isEmpty(errorMessage)}">
            <i class="close icon"></i>
            <div class="" th:text="${errorMessage}">提示：操作失败！</div>
        </div>
        <form class="ui large form" method="post" action="#" th:action="@{/updateinformation}">
            <input type="hidden" name="id" th:value="${user.id}">
            <div class="ui  segment">
                <div class="two inline fields" style="padding-left: 20%;padding-right: 20%;padding-top: 2em;">
                    <div class="two wide field">
                        <label>用户名:</label>
                    </div>
                    <div class="fourteen wide field">
                        <input type="text" name="username" readonly th:value="${user.username}">
                    </div>
                </div>
                <div class="two inline fields" style="padding-left: 20%;padding-right: 20%">
                    <div class="two wide field">
                        <label>邮箱:</label>
                    </div>
                    <div class="fourteen wide field">
                        <input type="text" name="email" readonly th:value="${user.email}">
                    </div>
                </div>
                <div class="two inline fields" style="padding-left: 20%;padding-right: 20%">
                    <div class="two wide field">
                        <label>昵称:</label>
                    </div>
                    <div class="fourteen wide field">
                        <input type="text" name="nickname" th:value="${user.nickname}">
                    </div>
                </div>

                <div class="two inline fields" style="padding-left: 20%;padding-right: 20%">
                    <div class="two wide field">
                        <label>用户头像:</label>
                    </div>
                    <div class="fourteen wide field">
						<img src="../static/images/001.jpg" th:src="@{${user.avatar}}"  id="show-img" class="ui small avatar image" style="width: 80px;height: 80px;">
						<input type="file" style="display:none"  id="file"/>
						<input type="hidden" name="avatar" id="avatar" th:value="${user.avatar}">
						<button id="upload-btn" type="button" class="ui mini blue button" >上传头像</button>
                        <div class="ui mini success message" id="message" style="display: none">
                        </div>
                    </div>
                </div>
                <div  style="padding-left: 20%;padding-right: 20%">
                    <label>（提示:点击图片选择图片，点击上传头像按钮上传图片到服务器）</label>
                </div>
                <br>
				<div class="ui center aligned container">
					<button  class="ui teal button">提交</button>
					<button type="button" class="ui secondary button" onclick="window.history.go(-1)">返回</button>
				</div>
            </div>

            <div class="ui error mini message"></div>

        </form>
    </div>
</div>

<!--底部内容-->
<footer th:replace="fragments::footer"></footer>
<script th:replace="fragments::script"></script>
<script>

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide')
    })

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-show');

    });

    //下拉列表
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    //表单验证
    $('.ui.form').form({
        fields: {
            nickname: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '昵称不能为空！'
                }]
            }
        }
    });


    $(function () {
        $("#upload-btn").click(function () {
            var fileInput = $('#file').get(0).files[0];
            if (!fileInput){
                alert("上传的图片不能为空！");
                return;
            }
            var form = new FormData();
            form.append("file", document.getElementById("file").files[0]);
            $.ajax({
                url: "/upload",    //后台url
                data: form,
                cache: false,
                async: false,
                type: "POST",          //类型，POST或者GET
                processData: false,
                contentType: false,
                success: function (data) {   //成功，回调函数
                    $("#avatar").val(data);
                    $("#message").css("display","inline");
                    $("#message").text("提示：图片上传成功");
                }

            });
        })
    })

    $(function () {
        $("#show-img").click(function () {
            $("#file").click();

        })

    })

	//预览上传的头像
	$("#file").change(function (e) {
		var reader = new FileReader();
		file = e.target.files[0];
		if (!/image\/\w+/.test(file.type)) {//判断文件的是不是图片
			alert("上传的文件格式不对,请重新上传...");
			return false;
		}
		reader.readAsDataURL(file);
		reader.onload = function (e) {
			$("#show-img").attr("src", "" + this.result + "");
		};
	});

    //消息提示关闭初始化
    $('.message .close')
        .on('click', function() {
            $(this)
                .closest('.message')
                .transition('fade');
        });
</script>
</body>

</html>